<template>
	<view class="page">
		<view class="packagePanel" style="padding-bottom:160px" :style="{'paddingBottom':cheight + 'px'}">
			<h1 class="package-title-ka">
				<view class="recordLoginText">{{ recordLoginText }}</view>
				<view class="recordLoginText1">客户卡号</view>
			</h1>
			<h1 class="package-title">选择流量包</h1>
			<view style="display: flex; justify-content: space-between;flex-wrap: wrap;padding:0 13px;">
				<template v-for="item in simData">

					<view v-if="simData.length >= 1" :key="item.id" class="package p-se2"
						:class="{ 'label-defined-active': indexActive == item.id }" style="position: relative;"
						@click="changeState(item)">
						<view class="package-name">
							<h1 v-if="item.type == 11 || item.type == 16 || item.type == 18">
								{{ item.packageName ? item.packageName : item.name }}</h1>
							<h1 v-else>{{ item.packageName ? item.packageName : item.name }}</h1>
							<view v-if="(item.type == 17)"> 有效期：30天有效期 套餐顺延生效，当月如需继续使用 请充值加油包。</view>
							<view v-if="(item.type == 10)"> 有效期：每个月月底清零，流量包每月限购一次。用完可继续购买加油包使用。</view>

							<view v-if="(item.type == 14)"> 有效期：每个月27号清零，套餐包可无限叠加使用。</view>
							<view v-if="(item.type == 15)"> 有效期：每个月27号清零，套餐包用完可继续购买加油包使用。</view>
							<view v-if="(item.type == 3)"> 有效期：每个月月底清零，再次购买顺延生效，流量用完请购买加油包。</view>

							<view v-if="(item.type == 2)"> 有效期：每个月月底清零，套餐可无限叠加。</view>
							<view v-if="(item.type == 18 || item.type == 11 || item.type == 16 || item.type == 4)">
								主套餐用完后，请购买此套餐,加油包可无限叠加使用</view>
							<view v-if="item.type == 111"> 主套餐用完后，请购买此套餐,加油包7天有效，月底清零</view>
							<view v-if="(item.type == 20)"> 套餐每30天含{{ item.flowRate/1024 }}G流量，一年有效，有效期内流量不够用，请充值加油包。
							</view>
							<view v-if="(item.type == 21)"> 套餐每个月含{{ item.flowRate/1024 }}G流量，一年有效，有效期内流量不够用，请充值加油包。
							</view>
							<view v-if="(item.type == 25)"> 套餐每个月含{{ item.flowRate/1024 }}G流量
								每月27号重新算套餐流量，一年有效，有效期内流量不够用，请充值加油包。 </view>
							<view v-if="(item.type == 26)"> 套餐每个月含{{ item.flowRate/1024 }}G流量
								每月27号重新算套餐流量，半年有效，有效期内流量不够用，请充值加油包。 </view>
							<view v-if="(item.type == 24)"> 套餐每30天含{{ item.flowRate/1024 }}G流量，半年有效，有效期内流量不够用，请充值加油包。
							</view>
							<view v-if="(item.type == 23)"> 套餐每个月含{{ item.flowRate/1024 }}G流量，半年有效，有效期内流量不够用，请充值加油包。
							</view>
							<view style="color:red">{{ item.remark }}</view>
						</view>
						<view
							v-if="item.type === 10 || item.type === 17 || item.type === 2 || item.type === 15 ||
							  item.type === 20 || item.type === 21 || item.type === 23 || item.type === 24 || item.type === 25 || item.type === 26"
							class="package-price">
							<template v-if="result.subJuan && result.subJuan.price">
								<view>
									￥<text>{{ (item.salePriceRmb ? item.salePriceRmb : item.salePrice / 100 ) - (result.subJuan.price*1) - (vipSubPrice ? vipSubPrice * 1 : 0 )  > 0 ? ((item.salePriceRmb ? item.salePriceRmb : item.salePrice / 100 ) - (result.subJuan.price*1) - (vipSubPrice ? vipSubPrice * 1 : 0 ) ).toFixed(2) : 0 }}</text>
								</view>
								<view class="fdaw">原价{{ item.salePriceRmb ? item.salePriceRmb : item.salePrice / 100 }}
								</view>
							</template>
							<template v-else>
								<view>￥<text>{{ (item.salePriceRmb ? item.salePriceRmb : item.salePrice / 100) - (vipSubPrice ? vipSubPrice * 1 : 0 ) > 0 ? (item.salePriceRmb ? item.salePriceRmb : item.salePrice / 100) - (vipSubPrice ? vipSubPrice * 1 : 0 ) : 0}}</text>
								</view>
								<view class="fdaw">原价{{ item.salePriceRmb ? item.salePriceRmb : item.salePrice / 100 }}</view>
							</template>
						</view>
						<view v-else class="package-price">
							<view>￥<text>{{ item.salePriceRmb ? item.salePriceRmb : item.salePrice / 100 }}</text>
							</view>
						</view>
						<view class="bottom">
							<view class="top-right">
								<u-button type="primary" block color="#397EF5" @click="sumbit(item)">立即购买</u-button>
							</view>
						</view>	
					</view>
					<view v-if="simData.length >= 14" :key="item.id" class="package4" @click="changeState(item)">
						<text class="label-defined" :class="{ 'label-defined-active': indexActive == item.id }">
							<label v-if="indexActive == item.id">
								<!-- <van-icon name="success" color="#fff" /> -->
							</label>
						</text>
						<view class="package4-name">
							<h1 v-if="item.type == 11 || item.type == 16 || item.type == 18">
								{{ item.packageName ? item.packageName : item.name }}
							</h1>
							<h1 v-else>{{ item.packageName ? item.packageName : item.name }}</h1>
							<view v-if="(item.type == 17)">套餐流量30天有效，可跨月使用，有效期内流量不够用，请充值加油包。</view>
							<view v-if="(item.type == 18 || item.type == 11)">主套餐用完后，请购买此套餐,加油包可无限叠加使用</view>
							<view v-if="(item.type == 10)"> 有效期：每个月月底清零，套餐包用完可继续购买加油包使用。</view>
							<view v-if="(item.type == 14)"> 有效期：每个月27号清零，套餐包可无限叠加使用。</view>
							<view v-if="(item.type == 15)"> 有效期：每个月27号清零，套餐包用完可继续购买加油包使用。</view>
							<view v-if="(item.type == 3)"> 有效期：每个月月底清零，再次购买顺延生效，流量用完请购买加油包。</view>
							<view v-if="(item.type == 2)"> 有效期：每个月月底清零，套餐可无限叠加。</view>
							<view v-if="(item.type == 18 || item.type == 11 || item.type == 16 || item.type == 4)">
								套餐用完后，请购买此套餐,加油包可无限叠加使用 月底清零。</view>
							<view v-if=" item.type == 111"> 主套餐用完后，请购买此套餐,加油包可无限叠加使用 7天有效期。</view>
							<view v-if="(item.type == 20)"> 套餐每30天含{{ item.flowRate/1024 }}G流量，一年有效，有效期内流量不够用，请充值加油包。
							</view>
							<view v-if="(item.type == 21)"> 套餐每个月含{{ item.flowRate/1024 }}G流量，一年有效，有效期内流量不够用，请充值加油包。
							</view>
							<view v-if="(item.type == 25)"> 套餐每个月含{{ item.flowRate/1024 }}G流量
								每月27号重新算套餐流量，一年有效，有效期内流量不够用，请充值加油包。 </view>
							<view v-if="(item.type == 26)"> 套餐每个月含{{ item.flowRate/1024 }}G流量
								每月27号重新算套餐流量，半年有效，有效期内流量不够用，请充值加油包。 </view>
							<view v-if="(item.type == 24)"> 套餐每30天含{{ item.flowRate/1024 }}G流量，半年有效，有效期内流量不够用，请充值加油包。
							</view>
							<view v-if="(item.type == 23)"> 套餐每个月含{{ item.flowRate/1024 }}G流量，半年有效，有效期内流量不够用，请充值加油包。
							</view>
						</view>

						<view
							v-if="item.type === 10 || item.type === 17 || item.type === 2 || item.type === 15 ||
						  item.type === 20 || item.type === 21 || item.type === 23 || item.type === 24 || item.type === 25 || item.type === 26"
							class="package-price">
							<view>
								￥<text>{{ (item.salePriceRmb ? item.salePriceRmb : item.salePrice / 100 ) - (result.subJuan.price*1) - (vipSubPrice ? vipSubPrice * 1 : 0 ) > 0 ? (item.salePriceRmb ? item.salePriceRmb : item.salePrice / 100 ) - (result.subJuan.price*1) - (vipSubPrice ? vipSubPrice * 1 : 0 ) : 0 }}</text>
							</view>
							<view class="fdaw">原价{{ item.salePriceRmb ? item.salePriceRmb : item.salePrice / 100 }}
							</view>
						</view>
						<view v-else class="package-price">
							<view>￥<text>{{ (item.salePriceRmb ? item.salePriceRmb : item.salePrice / 100) - (vipSubPrice ? vipSubPrice * 1 : 0 ) > 0 ? (item.salePriceRmb ? item.salePriceRmb : item.salePrice / 100) - (vipSubPrice ? vipSubPrice * 1 : 0 ) : 0}}</text>
							</view>
							<view class="fdaw">原价{{ item.salePriceRmb ? item.salePriceRmb : item.salePrice / 100 }}
							</view>
						</view>
						<view class="bottom">
							<view class="top-right">
								<u-button type="primary" block color="#397EF5" @click="sumbit(item)">立即购买</u-button>
							</view>
					   </view>
					</view>
				</template>
			</view>
		</view>
		<view ref="toRecharge" class="toRecharge">
			<h1 class="package-title">选择活动余额</h1>
			<view v-if="showjuan" class="quan">
				<view class="w-zh">优惠</view>
				<view class="z-icon" @click="lintTo"><text v-if="total">-￥{{ total }}</text></view>
			</view>
			<view v-else class="quan">
				<view class="w-zh">优惠</view>
				<view class="z-icon">暂无可用活动余额</view>
			</view>
			<view v-if="isNaturalMonth" class="toRecharge-top">
				<u-radio-group v-model="isNextMonth" placement="row" size="34" class="radio-group-defined" iconSize="22">
					<u-radio activeColor="#397EF5" name="0">本月生效</u-radio>
					<u-radio activeColor="#397EF5" name="1">次月生效</u-radio>
				</u-radio-group>
			</view>
			<view v-if="isNaturalMonth" class="detail">请在有效时间内使用
				<text v-show="isNextMonth === '0'">，<text>月底清零。</text></text>
				<text v-show="isNextMonth === '1'">，<text>次月月底清零。</text></text>
			</view>
			<view v-if="showjuan" class="toRecharge-bottom">
				<view>金额：
					<text>{{ price - total - vipSubPrice > 0 ? ( price - total - vipSubPrice).toFixed(2) : 0 }}元</text>
					<text v-if="total || vipSubPrice"
						style="font-size:12px;display:inline-block;padding-left:4px;">优惠¥{{ total + vipSubPrice }}</text>
				</view>
				<view class="toRechargeBtn" @click="toRecharge()">订 购 </view>
			</view>
			<view v-else class="toRecharge-bottom">
				<view>金额：
					<text>{{ price > 0 ? price.toFixed(2) : 0 }} 元</text>
					<text v-if="total || vipSubPrice" style="font-size:12px;display:inline-block;padding-left:4px;">优惠 ¥ 0</text>
				</view>
				<view class="toRechargeBtn" @click="toRecharge()">订 购</view>
			</view>
		</view>
		<u-modal :show="show" @confirm="confirm" title="套餐生效提醒" :show-cancel-button="true" @cancel="show = false">
			<view class="slot-content" v-html="content"></view>
		</u-modal>
		<paymentMethod :uShow="isPayShow" :params="params" @hide="hide"/>
	</view>
</template>

<script>
	import paymentMethod from '@/components/paymentMethod.vue'
	export default {
		components:{
			paymentMethod
		},
		data() {
			return {
				recordLoginText: '',
				isNaturalMonth: true,
				showMonthChoose:true,
				isPayShow:false,
				showjuan: true,
				show:false,
				content:'',
				total: 10,
				vipSubPrice:0,
				isNextMonth: '0',
				indexActive: '12',
				cheight: null,
				result: {
					subJuan: {
						price: 10
					}
				},
				startTime:'',
				endTime:'',
				dataForm:{}, 
				params:{
					price: 0
				},
				simData: []
			}
		},
		onLoad() {
			this.recordLoginText = uni.getStorageSync('virtualNo') || ''
		},
		mounted() {
			uni.$on('refreshPreviousPage', (data) => {
			  this.refreshPage(data.data);
			});
			this.$nextTick(() => {
				this.cheight = this.$refs.toRecharge.$el.clientHeight
			})
		},
		onShow(){
			if(uni.getStorageSync('orderNo')) {
				this.orderChange(uni.getStorageSync('orderNo'))
			}
		},
		created() {
			this.init()
			/** 每月倒数第6天默认选中次月生效**/
			var date = new Date()
			var year = date.getFullYear()
			var month = date.getMonth()
			var day = date.getDate()
			var date2 = new Date(year, month + 1, 0)
			var endDay = date2.getDate()
			this.isNextMonth = day >= endDay - 5 ? '1' : '0'
		},
		methods: {
			//查询支付结果
			orderChange(orderId){
				this.$api.orderState({orderNo:orderId}).then(res=>{
					if(res.code === '200'){
						uni.showModal({
							title:"支付成功",
							content:"您已支付成功！预计一分钟内到账。如有疑问 请联系客服。",
							success(ress){
								uni.switchTab({
									url:"/pages/index/index"
								})
							}
						})
					}else{
						// uni.showToast({
						// 	title: orderId + res.message,
						// 	icon: 'none'
						// })
					}
				})
			},
			//页面跳转回来时带的参数
			refreshPage(data){
				this.dataForm = data
				this.total =data.price
			},
			//初始化
			init(){
				this.$api.soldPkg({iccid: uni.getStorageSync('iccid') || ''}).then(res=>{
					var result = res.data
					this.result = result
					if(res.code === '200' && result.list.length >0){
						this.simData = result.list
						this.simData.sort((a,b) => a.sort - b.sort)
						this.isAdmin = result.isAdmin
						// this.globalIsAdmin = result.isAdmin
						this.itemInfo = result.list[0]
						this.indexActive = this.simData[0].id
						this.isNaturalMonth = (this.simData[0].type === 2 || this.simData[0].type === 10 || this.simData[0].type === 15)
						this.showjuan = (this.simData[0].type === 2 || this.simData[0].type === 10 || this.simData[0].type === 15 || this.simData[0].type === 17 || this.simData[0].type === 20 || this.simData[0].type == 21 || this.simData[0].type == 23 || this.simData[0].type == 24 || this.simData[0].type == 25 || this.simData[0].type == 26)
						this.price = ((this.simData[0].salePriceRmb ? this.simData[0].salePriceRmb : this.simData[0].salePrice / 100).toFixed(2)) * 1
						this.total = 0
						this.secondaryId = ''
						this.primaryId = ''
						if(this.result.subJuan&&this.result.subJuan.vipSubPrice){
							this.vipSubPrice = this.result.subJuan.vipSubPrice*1;
						}
						if (this.dataForm.total) {
						  this.total = this.dataForm.total * 1
						  this.secondaryId = this.dataForm.secondaryId
						  this.primaryId = this.dataForm.primaryId
						} else {
						  this.total = result.subJuan.price * 1 || 0
						  if (result.subJuan.types === 1) {
							this.secondaryId = result.subJuan.id
						  } else {
							this.primaryId = result.subJuan.id
						  }
						}
					}
				})
			},
			toRecharge() {
				var params = {
					iccid:uni.getStorageSync('iccid') || '',
					pkgId: this.itemInfo.id || '',
					isAdmin: this.isAdmin,
					isNextMonth: this.isNaturalMonth ? this.isNextMonth : '0'
				}
				this.$api.activityTimer(params).then(res=>{
					if(res.code === '200'){
					//	this.content =  '生效时间：' + res.data.start + '<br/>到期时间：' + res.data.end + '<br/>' + "请确定套餐生效时间"
					//	this.show = true
						this.startTime = res.data.startTime
						this.endTime = res.data.endTime
					}else{
						this.startTime ='根据套餐时间累加';
					}
					this.confirm();
					
				})
			},
			confirm() {
				this.show = false
				//调起支付
				var data = {
					iccid: uni.getStorageSync('iccid') || '',
					soldPackageId: this.itemInfo.id,
					isAdmin: this.isAdmin,
					secondaryId: this.secondaryId,
					startTime:this.startTime,
					endTime:this.endTime,
					primaryId: this.primaryId,
					total: this.total,
					vipSubPrice:this.showjuan ? this.vipSubPrice : 0,
					packageName:this.itemInfo.packageName?this.itemInfo.packageName:this.itemInfo.name,
					isNextMonth: this.isNaturalMonth ? this.isNextMonth : '0',
					price:this.total,
					salePriceRmb:this.itemInfo.salePriceRmb,
					mobile: uni.getStorageSync('userPhone') || '',
				}
				// this.params = data
				uni.navigateTo({
					url:'/pages/order/orderIndex?params='+encodeURIComponent(JSON.stringify(data))
				})
				// this.isPayShow = true
			},
			hide(){
				this.isPayShow = false
			},
			lintTo() {
				uni.navigateTo({
					url:'/pages/coupon/index'
				})
			},
			sumbit(data){
			  this.changeState(data)
			  this.toRecharge()
			},
			changeState(item) {
				this.indexActive = item.id
				this.itemInfo = item
				this.price = ((item.salePriceRmb ? item.salePriceRmb : item.salePrice / 100).toFixed(2)) * 1
				this.type = item.type
				this.total = 0
				this.packageTypeCode = item.packageTypeCode
				if (item.isAdmin && item.isAdmin === 1) {
					this.isAdmin = item.isAdmin
				} else {
					this.isAdmin = this.result.isAdmin
				}
				if (item.type === 10 || item.type === 17 || item.type === 2 || item.type === 15 ||
				item.type === 20 || item.type === 21 || item.type === 23 || item.type === 24 || item.type === 25 || item.type === 26) {
					this.showjuan = true
					if (this.dataForm.total) {
						this.total = this.dataForm.total * 1
						this.secondaryId = this.dataForm.secondaryId
						this.primaryId = this.dataForm.primaryId
					} else {
						if (this.result.subJuan) {
							this.total = this.result.subJuan.price * 1 || 0
							if (this.result.subJuan.types === 1) {
							  this.secondaryId = this.result.subJuan.id
							} else {
							  this.primaryId = this.result.subJuan.id
							}
						}
					}
				} else {
					this.showjuan = false
					this.total = 0
				}
				this.isNaturalMonth = !!(item.type === 2 || item.type === 10 || item.type === 14 || item.type === 15)
				this.showMonthChoose = !!(item.type === 2 || item.type === 14 || item.type === 15 || item.type === 10)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100%;

		.packagePanel {
			.package-title {
				color: #333;
				font-size: 16px;
				margin-top: 16px;
				margin-bottom: 8px;
				font-weight: bold;
				margin-left: 20px;
			}

			.package-title-ka {
				// width: 100%;
				height: 77px;
				background: url("./../../static/img/12345.png") no-repeat;
				background-size: 100% 100%;
				padding: 0 12px;
				font-size: 18px;
				font-weight: bold;
				color: #FFFFFF;
				display: flex;
				flex-direction: column;
				justify-content: center;
				flex-wrap: wrap;
				.recordLoginText {
					display: block;
					font-size: 18px;
					margin-left: 56px;
					margin-bottom: 6px;
				}

				.recordLoginText1 {
					display: block;
					font-size: 12px;
					margin-left: 56px;
					font-weight: normal;
				}
			}

			.p-se {
				background: #E1EDFF;
			}

			.p-se2 {
				background: #EFEFEF;
			}

			.p-se3 {
				background: #FEECE0;
			}
			.bottom{
			    display: flex;
			    justify-content: end;
			    align-items: center;
			    padding:0px 13px 14px 14px;
			    width: 100%;
			    .top-left{
			      font-size: 12px;
			      font-family: PingFangSC-Regular, PingFang SC;
			      font-weight: 400;
			      color: #28292D;
			      padding:6px;
			      padding-left:20px;
			      text-align: center;
			      // background: #FFF4EB url('../../assets/new/newCopy/icon09.png') no-repeat 3px center;
			      background-size: 12px 12px;
			      border-radius: 2px;
			    }
			    .top-right{
			        font-size: 14px;
			        font-family: PingFangSC-Regular, PingFang SC;
			        font-weight: 400;
			        color: #C4C4C4;
			        line-height: 20px; 
			        .u-button{
			            height:32px;
						width: 100px;
			        }
			    }
			  }
			.package {
				width: 100%;
				display: flex;
				position: relative;
				margin-bottom: 10px;
				border-radius: 11px;
				flex-wrap: wrap;
				.package-name {
					flex-grow: 1;
					padding: 8px 0 8px 10px;
					h1 {
						margin: 5px 0;
						color: #28292D;
						font-weight: bold;
						font-size: 14px;
					}

					uni-view {
						margin: 6px 0;
						font-weight: 500;
						color: #63666D;
						width: 200px;
						line-height: 16px;
						font-size: 11px;
					}
				}

				.package-price {
					width: 80px;
					// border: 1px solid #FFA941;
					margin-right: 12px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					// background: linear-gradient(144deg, #FB674A 1%, #FE9C54 99%);
					border-radius: 5px;

					uni-view {
						font-size:12px;
						font-weight: bold;
						color: #397EF5;

						text {
							font-size:14px;
							color: #397EF5;
						}
					}

				}

				.package-price.overlay-package {
					border-color: #07c160;
					background: #07c160;
				}

			}

			.label-defined {
				display: block;
				border-width: 14px 18px 14px 18px;
				border-style: solid;
				border-color: transparent;
				position: absolute;

				label {
					position: absolute;
					left: -14px;
					top: -12px;
					background: transparent;
				}
			}

			.label-defined-active {
				// border-color: red transparent transparent red;
				background: #EFF5FF;
				border: 1px solid #397EF5;
			}

			.package4 {
				width: 169px;
				height: 147px;
				background: #E1EDFF;
				border-radius: 4px;
				margin-bottom: 8px;

				.package4-name {
					flex-grow: 1;
					padding: 13px 13px 0;

					h1 {
						margin: 5px 0;
						color: #0D7FC6;
						font-weight: bold;
						font-size: 18px;
					}

					uni-view {
						margin: 10px 0;
						font-weight: 500;
						color: #63666D;
						line-height: 17px;
						font-size: 12px;
					}
				}

				.package4-price {
					display: flex;
					margin-left: 11px;
					align-items: center;
					width: 110px;
					height: 28px;
					// background: linear-gradient(144deg, #FB674A 1%, #FE9C54 99%);
					border-radius: 14px;
					justify-content: center;

					uni-view {
						font-size: 14px;
						font-weight: bold;
						color: #397EF5;

						text {
							font-size: 24px;
						}
					}
				}
			}
		}

		.package-title {
			color: #333;
			font-size: 14px;
			margin-top: 6px;
			margin-bottom: 8px;
			font-weight: bold;
			margin-left: 20px;
		}

		.quan {
			margin:0px 13px;
			background: #F6F6F6;
			display: flex;
			align-items: center;
			border-radius: 8px;
			height:34px;

			uni-view {
				width: 46%;
			}

			.w-zh {
				color: #28292D;
				font-size: 14px;
				padding-left: 20px;
				font-weight: 600;
			}

			.z-icon {
				text-align: right;
				background: url('./../../static/img/icon12.png')no-repeat 90% center;
				background-size: 9px 16px;
				padding-right: 36px;
				color: #397EF5;
				height: 20px;
				font-weight: 600;
				font-size: 12px;
				line-height: 20px;
			}
		}

		.toRecharge {
			position: fixed;
			width: 100%;
			bottom: 0;
			font-size: 14px;
			background: #fff;

			.toRecharge-top {
				display: flex;
				background: #fff;

				.radio-group-defined {
					display: flex;
					padding-left: 20px;
					// justify-content: center;
					align-items: center;
					height: 30px;
					uni-view {
						height: 20px;
						margin-right: 15px;
					}
				}

			}

			.detail {
				color: #397EF5;
				background: #EFF5FF;
				padding-left: 20px;
				font-size: 12px;
				height: 22px;
				line-height: 22px;
			}

			.toRecharge-bottom {
				display: flex;
				align-items: center;
				uni-view {
					padding-right: 15px;
					color: #333333;
					background: #fff;
					line-height: 45px;
					padding-left: 14px;
					width: 65%;
					font-size: 12px;

					text {
						color: #397EF5;
						font-size:18px
					}
				}

				.toRechargeBtn {
					// padding: 0 30px;
					display: inline-block;
					line-height: 40px;
					height: 40px;
					color: #fff;
					margin: 6px 0;
					width: 35%;
					background: #397EF5;
					border-radius: 22px;
					text-align: center;

					.n-btn {
						border-radius: 22px;
						text-align: center;
						background: #397EF5;
						// width: 90%;
						color: #fff;
						margin: 0 auto;
					}
				}
			}
		}
	}

	.fdaw {
		font-size: 14px;
		color: #397EF5;
		text-align: right;
		margin-top: 6px;
		width: 100%;
		text-decoration: line-through;
	}
</style>